import React, {FC} from "react";
// 生成二维码插件
import QRCode from 'qrcode.react';


// 定义二维码组件
const QR: FC<any> = ({children, url = "https://www.baidu.com"}) => {
    const [visibleQR, setVisibleQR] = React.useState(false);
    const boxRef = React.useRef<HTMLDivElement>(null);
    const parentRef = React.useRef<HTMLDivElement>(null);
    const mouseEnter = () => {
        // console.log(parentRef.current!.offsetWidth, parentRef.current!.offsetHeight);
        boxRef.current!.style.bottom = parentRef.current!.offsetHeight + 10 + "px";
        if (parentRef.current!.offsetWidth / 2 < 20) {
            boxRef.current!.style.left = -parentRef.current!.offsetWidth / 2 - 10 + "px";
        } else {
            boxRef.current!.style.left = parentRef.current!.offsetWidth / 2 - 40 + "px";
        }


        setVisibleQR(true);
    }
    const mouseLeave = () => {
        setVisibleQR(false);
    }
    return (
        <div ref={parentRef}
             style={{display: "inline-block", wordBreak: "break-all", position: "relative"}}
             onMouseEnter={mouseEnter}
             onMouseLeave={mouseLeave}>
            <div ref={boxRef} style={{
                position: "absolute",
                bottom: 0,
                left: 0,
                padding: "8px",
                backgroundColor: "#000000af",
                display: visibleQR ? 'block' : 'none',
                zIndex: 999
            }}>
                <QRCode
                    value={url}
                    size={150} // 二维码的大小
                    fgColor="#000000" // 二维码的颜色
                    bgColor="#ffffff" // 二维码的背景颜色
                    includeMargin={false} // 是否包含二维码的边距
                    renderAs="svg" // 二维码的格式
                    level="L" // 二维码的级别
                />
                <span style={{
                    position: "absolute",
                    top: "100%",
                    left: "20px",
                    display: "inline-block",
                    width: "0",
                    height: "0",
                    borderTop: "10px solid #000000af",
                    borderBottom: "10px solid transparent",
                    borderLeft: "10px solid transparent",
                    borderRight: "10px solid transparent"
                }}></span>
            </div>
            {children}
        </div>
    )
}

export default QR;